<%- include('nav') %>
  <div class="text-sm breadcrumbs">
    <ul>
      <li>
        <a href="/admin/home">首页</a>
      </li>
      <li>群聊管理</li>
    </ul>
  </div>

  <div id="rooms-app" class="col-12" data-theme="bumblebee">
    <table class="table col-12 table-zebra table-compact">
      <thead>
        <tr>
          <th>群id</th>
          <th></th>
          <th>群</th>
          <th>管理者</th>
          <th>人数</th>
          <th>到期时间</th>
          <!-- <th>邀请</th> -->
          <!-- <th>签到</th> -->
          <!-- <th>操作</th> -->
        </tr>
      </thead>

      <tr v-for="room in rooms">
        <td>
          <div>{{room.id}}</div>
        </td>
        <td>
          <div v-if="room.vip" class="badge badge-info badge-sm">vip</div>
        </td>
        <td>
          <a target="_blank" v-bind:href="'/admin/manage/contact?contactid='+room.inviterid" class="m1 badge badge-sm"
            v-bind:class="{'badge-outline': room.vip == false}">{{room.topic || room.id}}</a>
        </td>
        <td>
          <div @click="selectedRoom=room">
            <div class="flex items-center" v-if="room.inviter">
              <img class="circle" v-bind:src="room.inviter.headimgurl" style="width: 20px" />
              <div class="pl1 badge badge-success badge-sm">{{room.inviter.nickname}}</div>
            </div>
            <div v-else class="badge badge-outline badge-sm">{{room.inviterid?room.inviterid:'没有邀请人'}}</div>
          </div>
        </td>
        <td>{{room.membersLength}}</td>
        <td>
          <div class="flex items-center font-13">
            <div class="flex items-center" v-if="room.editExpires">
              <input class="input input-bordered" type="date" v-model="room.inputExpires" />
              <svg class="ml1" @click="saveRoomExpires(room)" viewBox="0 0 24 24" width="16" height="16"
                stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round">
                <path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z"></path>
                <polyline points="17 21 17 13 7 13 7 21"></polyline>
                <polyline points="7 3 7 8 15 8"></polyline>
              </svg>
              <svg class="ml1" @click="room.editExpires = false" viewBox="0 0 24 24" width="16" height="16"
                stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round">
                <line x1="18" y1="6" x2="6" y2="18"></line>
                <line x1="6" y1="6" x2="18" y2="18"></line>
              </svg>
            </div>
            <span v-else> {{room.expiresDate}} </span>

            <span class="blue underline" v-if="!room.editExpires " @click="room.editExpires = true">续期时间</span>
            <svg v-if="!room.editExpires " @click="room.editExpires = true" xmlns="http://www.w3.org/2000/svg"
              width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
              stroke-linecap="round" stroke-linejoin="round">
              <path d="M12 20h9"></path>
              <path d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z"></path>
            </svg>
          </div>
        </td>

        <!-- <td>{{room.invite}}</td> -->
        <!-- <td>{{room.sign}}</td> -->
        <!-- <td><div class="btn btn-primary btn-xs">开通</div></td> -->
      </tr>
    </table>

    <div v-if="rooms.length==0" class="gray my2 center">
      <img src="/img/empty.png" style="width: 250px" class="mx-auto" />
      <div class="font-12 bold">没有更多数据了</div>
    </div>

    <div class="p1 font-12 gray center">到底了~</div>


    <div v-show="selectedRoom">
      <div class="weui-mask" @click="selectedRoom=false"></div>
      <div class="weui-half-screen-dialog">
        <!-- <i class="weui-icon-warn weui-icon_msg"></i> -->
        <div class="weui-half-screen-dialog__hd">
          <div class="weui-half-screen-dialog__hd__side">
            <button class="weui-icon-btn" @click="selectedRoom=false">
              返回
              <i class="weui-icon-back-arrow-thin"></i>
            </button>
          </div>
          <div class="weui-half-screen-dialog__hd__main">变更管理者</div>
        </div>

        <div class="weui-half-screen-dialog__bd">
          <div class="center">
            <div>
              <div v-for="client in clients" @click="confirmClient(client)"
                class="mr1 mt1 inline-block badge badge-success badge-sm">{{client.user ?
                client.user.nickname :
                client._id}}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <script>
    new Vue({
      el: "#rooms-app",
      data: function () {
        return {
          rooms: [],
          clients: [],
          selectedRoom: null,
        };
      },
      created: function () {
        this.fetchRooms();
        this.fetchClients();
      },
      methods: {
        fetchRooms: function () {
          var that = this;
          let loading = weui.loading();
          axios.get("/admin/bot/rooms").then(function (res) {
            if (res.data.rooms) {
              res.data.rooms.forEach(function (room) {
                room.editExpires = false;
                room.inputExpires = "";
              });
            }
            that.rooms = res.data.rooms;
            loading.hide();
          });
        },
        fetchClients: function () {
          var that = this;
          let loading = weui.loading();
          axios.get("/admin/bot/clients").then(function (res) {
            res.data.clients && res.data.clients.map(function (client) {
              client.balance = client.red_fee ? client.red_fee / 100 : 0;
            })
            that.clients = res.data.clients;
            loading.hide();

          });
        },
        confirmClient: function (client) {
          var that = this;
          let loading = weui.loading();
          axios.post('/admin/bot/room/setclient', { _id: this.selectedRoom._id, inviterid: client.contactid }).then(function (res) {
            that.selectedRoom = null;
            that.fetchRooms();
            weui.toast("修改成功")
          })
        },
        saveRoomExpires: function (room) {
          console.log(room);
          let that = this;
          axios.post("/admin/bot/room/setexpires", { room: room }).then(function (res) {
            that.fetchRooms();
          });
        },
      },
    });
  </script>